<template>
	<view class="analy">
		<view class="analy-two">
			<view class="analy-two-text">解析</view>
			<view class="analy-two-cont">
				<view class="analy-two-cont-title">本题正确答案：{{answerLabel}}</view>
				<view class="analy-two-cont-title">您的答案：{{selectChoice}}</view>
				{{analysis}}
			</view>
		</view>
		<view class="analy-two">
			<view class="analy-two-text">考点</view>
			<view class="analy-two-cont">{{subjectTypeDesc}}</view>
		</view>
		<view class="analy-two">
			<view class="analy-two-text">来源</view>
			<view class="analy-two-cont">{{source}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			subject: ""
		},
		computed: {
		    isSubjet(){
                return this.subject != ""
			},
			selectChoice() { //学生答案
				return this.isSubjet ? this.subject.selectChoice : ""
			},
			useDuration() { //答题用时
                return this.isSubjet ? this.subject.useDuration : ""
			},
			rightPercent() { //答题正确率
                return this.isSubjet ? this.subject.rightPercent : ""
			},
			easyProneChoice() { //易错项
                return this.isSubjet ? this.subject.easyProneChoice : ""
			},
			Answer() { //正确答案
                return this.isSubjet ? this.subject.answer : []
			},
			answerLabel(){
			    if(this.Answer.length == 0){
			        return ""
				}else{
                    return  this.Answer.reduce((s1,s2)=>s1+','+s2)
				}
			},
			analysis() { //解析
				return this.isSubjet ? this.subject.analysis : ""
			},
			subjectTypeDesc() { //考点
				return this.isSubjet ? this.subject.subjectTypeDesc : ""
			},
			source() { //来源
				return this.isSubjet ? this.subject.source : ""
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.analy {
		&-one {
			height: 150upx;
			margin: 40upx;
			font-size: 28upx;
			margin: 20upx;
			border-radius: 8rpx;
			box-shadow: 0 0 10upx #eaeaea;
			padding: 40upx 60upx;

			&-block {
				display: inline-block;
				width: 33%;
				height: 100%;
				text-align: center;
			}

			&-title {
				display: block;
				color: #333;
				font-size: 24upx;
				margin-bottom: 15upx;
			}

			&-cont1 {
				display: block;
				color: #5ea1f8;
				font-size: 30upx;
			}

			&-cont2 {
				display: block;
				color: #74c1b6;
				font-size: 30upx;
			}

			&-cont3 {
				display: block;
				color: #f1685d;
				font-size: 30upx;
			}
		}

		&-two {
			&-text {
				margin: 50upx 20upx 30upx 20upx;
				color: #333;
				font-size: 30upx;
				font-weight: bold;
			}

			&-cont {
				margin: 20upx;
				font-size: 28upx;
				border-radius: 8rpx;
				box-shadow: 0 0 10upx #eaeaea;
				padding: 30upx 30upx;
				color: #666;

				&-title {
					font-size: 30upx;
					font-weight: bold;
					color: #333;
					margin-bottom: 20upx;
				}

				&-answer {
					display: inline-block;
					color: #5ea1f8;
				}
			}

		}

	}
</style>
